<template>
	<view class="supply">
		<u-empty text="暂无数据哦~~" mode="list" v-if="list1.length==0" margin-top='50'></u-empty>
		<view class="list" v-for="item in list1" @click.stop="goDetails(item)" :key="item.id">
			<view class="main-container">
				<view class="left-img">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="right-container">
					<view class="top">
						<view class="name">
							<view class="vip">
								供应
							</view>
							<view class="thing">
								{{item.name}}
							</view>
						</view>
						<view class="dolor">
							￥{{item.price}}元
						</view>
					</view>
					<view class="content">
						<view class="content-top">
							<view class="bx" v-if="item.newSpe[0].value">
								{{item.newSpe[0].name}}：{{item.newSpe[0].value}}{{item.newSpe[0].unit}}
							</view>
							<view class="gf" v-if="item.newSpe[1].value">
								{{item.newSpe[1].name}}：{{item.newSpe[1].value}}{{item.newSpe[1].unit}}
							</view>
							<!-- <view class="gd" v-if="item.newSpe[2].value">
								{{item.newSpe[2].name}}：{{item.newSpe[2].value}}{{item.newSpe[2].unit}}
							</view> -->
						</view>
						<view class="center">
							<view class="jp" v-if="item.newSpe[2].value">
								{{item.newSpe[2].name}}：{{item.newSpe[2].value}}{{item.newSpe[2].unit}}
							</view>
							<view class="wz">
								{{item.lvl_name}}
							</view>
							<!-- <view class="empt">
							</view> -->
						</view>
					</view>
					<view class="intro">
						{{item.introduction}}
					</view>
				</view>
			</view>
			<view class="list-bottom">
				<!-- <view class="liulan">
					浏览：{{item.browse_num}}
				</view> -->
				<!-- <view class="th">
					通话：{{item.call_num==null?0:item.call_num}}次
				</view> -->
				<view class="jl">
				</view>
				<view class="mq">
					{{item.create_time.substring(0,10)}}
				</view>
			</view>
			<view class="list-bottom">
				<!-- <view class="liulan">
					浏览：{{item.browse_num}}
				</view> -->
				<view class="th" style="color: #FFAB68;">
					{{item.refresh_time}}<text style="" class="freshTime">刷新</text>
				</view>
			</view>
			<view class="list-bottom">
				<view class="ck" @click.stop="goUpload(item.id)">
					编辑
				</view>
				<view class="ck" @click.stop="supplySubDel(item.id)" >
					删除
				</view>
			</view>
		</view>
		<view class="freshSupply" @click="pullFresh">
			一键刷新
		</view>
		<u-toast ref="uToast"></u-toast>
		<bottomShow :showPop="showBottom" :title="bottomTitle" :tip="bottomTip" @refuse="refuse" @submit="subFresh">
		</bottomShow>
		<view class="noMore" v-if="last_page==form.page&&list1.length!=0"
			style="text-align: center;color: #797575;margin-top: 20rpx;padding-bottom: 20rpx;">
			数据加载完成...
		</view>
	</view>

</template>

<script>
	import {
		mySupplyList,
		supplyBrowse,
		cityList,
		systemConfig,
		refreshSupply,
		supplySubDel
	} from '@/request/api.js'
	import bottomShow from '@/components/common/bottomShow.vue'
	import vvSelectArea from '@/components/vv-select-area/vv-select-area'
	// import vvSelect from '@/components/vv-select/vv-select.vue'
	export default {
		onShareAppMessage() {
			return {
				title: '苗木超市',
				path: '/pages/index/index',

			}
		},
		onShareTimeline: function() {
			return {
				title: '苗木超市',
				path: '/pages/index/index',
			}
		},
		components: {
			vvSelectArea,
			bottomShow
			// vvSelect
		},
		data() {
			return {
				areas: [],
				list: [{
					name: '认证企业'
				}, {
					name: '最新市场'
				}, {
					name: '距离最近'
				}],
				// 或者如下，也可以配置keyName参数修改对象键名
				// list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
				curNow: 0,
				keyword: '',
				form: {
					lng: '',
					lat: '',
					page: 1,
					pageSize: '10',
					search_name: '',
					type: '1',
					province_id: '',
					city_id: '',
					county_id: '',
				},
				list1: [],
				last_page: 1,
				authAllow: false,
				categorys: [],
				showTitle: false,
				showBottom: false,
				sysConfig: null,
				bottomTip: '',
				bottomTitle: '',
			
			}
		},
		onReachBottom() {
			// this.$refs.community.reachBottom()
			// console.log('到达底部')
			// console.log(this.form.page,this.last_page)
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.supplyList()
			}
		},
		onPullDownRefresh() {
			this.form.page = 1
			this.list1 = []
			this.supplyList()
			this.getConfig()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		created() {
			if (this.curNow == 0) {
				this.form.type = 1
			} else if (this.curNow == 1) {
				this.form.type = 2
			} else {
				this.form.type = 3
			}
			// this.getAuthorizeInfo()
		},
		onReady() {

		},
		onShow() {
			this.form.page = 1
			this.list1 = []
			this.supplyList()
			this.getConfig()
		},
		onHide() {
			this.authAllow == false
		},
		methods: {
			supplySubDel(e){
				supplySubDel({
					id:e
				}).then(res => {
					console.log(res,'eeeeee')
					if (res.code == 1) {
						this.$refs.uToast.show({
							type: 'success',
							title: '删除成功',
							message: "删除成功",
						})
						this.supplyList('delete')
					}
				})
			},
			goUpload(e){
				uni.navigateTo({
					url:`/my_pages/my_supply/supplyEdit?id=${e}&from=supply`
				})
			},
			getConfig() {
				systemConfig().then(res => {
					this.sysConfig = res.data
					console.log(this.sysConfig)
				})
			},
			refuse() {
				this.showBottom = false
			},
			subFresh() {
				this.getRefreshSupply()
			},
			getRefresh() {
				if (this.sysConfig.sys_config.refurbish_integral != 0) {
					this.bottomTitle = '一键刷新'
					this.bottomTip = '提示：普通会员一键刷新需要充值积分，黄金会员或者钻石会员一键刷新免费！'
					this.showBottom = true
				} else {
					this.getRefreshSupply()
				}

			},
			getRefreshSupply() {
				refreshSupply().then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							type: 'success',
							title: '一键刷新电话成功',
							message: "一键刷新成功",
						})
						uni.switchTab({
							url: "/pages/supply/supply"
						})
					}
				})
				this.showBottom = false
			},
			pullFresh() {
				this.getRefresh()
			},
			changecity(val, label) {
				// console.log(val)
				// console.log(val)
				this.form.province_id = val[0]
				this.form.city_id = val[1]
				this.form.county_id = val[2]
				this.form.page = 1
				this.list1 = []
				this.supplyList()
			},
			closeSel() {
				if (this.authAllow == false) {
					this.getAuthorizeInfo()
					return false;
				}
				this.form.page = 1
				this.list1 = []
				// this.$refs.vvSelect.emptCheckLabels()
				this.$refs.csSel.emptCheckLabels()
				this.form.city_id = ''
				this.form.startTime = ''
				this.form.county_id = ''
				this.form.province_id = ''
				this.form.endTime = ''
				this.supplyList()
			},
			pickerChange2(val) {
				this.form.city_id = val
				this.form.page = 1
				this.list1 = []
				console.log(this.form)
				this.supplyList()
			},
			getCity() {
				cityList().then(res => {
					// console.log(res)
					let data = res.data
					let arr = []
					// this.categorys = res.data
					this.areas = res.data
					this.getAuthorizeInfo()
				})
			},
			openAuthSetting() {
				let that = this;
				uni.getSetting({
					success: (res) => {
						console.log(res, JSON.stringify(res, "getSetting"));
						if (
							res.authSetting["scope.userLocation"] != undefined &&
							res.authSetting["scope.userLocation"] != true
						) {
							uni.showModal({
								title: "请求授权当前位置",
								content: "需要获取您的地理位置，请确认授权",
								success: function(res) {
									if (res.cancel) {
										uni.showToast({
											title: "拒绝授权",
											icon: "none"
										});
									} else if (res.confirm) {
										uni.openSetting({
											success: function(dataAu) {
												console.log(dataAu, "openSetting");
												if (dataAu.authSetting[
														"scope.userLocation"] ==
													true) {
													uni.showToast({
														title: "授权成功",
														icon: "none"
													});
													//再次授权，调用wx.getLocation的API
													that.getAuthorizeInfo();
												} else {
													uni.showToast({
														title: "授权失败",
														icon: "none"
													});
												}
											},
										});
									}
								},
							});
						} else if (res.authSetting["scope.userLocation"] == undefined) {
							//调用wx.getLocation的API
							console.log("首次授权");
							this.getAuthorizeInfo();
						} else {
							//调用wx.getLocation的API
							this.getAuthorizeInfo();
						}
					},
				})
			},
			// 位置授权
			getAuthorizeInfo() {
				let self = this
				// console.log(111)
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						uni.getLocation({
							success: function(res) {
								console.log("经纬度", res);
								self.form.lng = res.longitude
								self.form.lat = res.latitude
								self.authAllow = true
								self.supplyList()
							},
						})
					},
					fail() { // 拒绝授权
						// this.openConfirm();
						// self.$refs.uToast.show({
						// 	type: 'error',
						// 	title: '您必须允许所在位置才能使用供应大厅功能',
						// 	message: "您必须允许所在位置才能使用供应大厅功能",
						// })
						self.openAuthSetting()
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			supplyList(type) {
				// console.log(this.form)
				mySupplyList(this.form).then(res => {
					if (res.code == 1) {
						this.list1 = type == 'delete' ? res.data.list : this.list1.concat(res.data.list)
						// console.log(res.data.total)
						this.list1.map(item => {
							let arr = []
							item.specs_config.forEach(el => {
								if (el.value != '') {
									arr.push(el)
								}
							})
							item['newSpe'] = arr
						})
						this.last_page = Math.ceil(res.data.total / 10)
						// console.log(this.last_page)
					}
				})
			},
			selectTab(e) {
				this.curNow = e.index;

			},
			pickerChange(e) {
				this.curNow = e.index;
				if (this.curNow == 0) {
					this.form.type = 1
				} else if (this.curNow == 1) {
					this.form.type = 2
				} else {
					this.form.type = 3
				}
				this.list1 = []
				this.form.page = 1
				this.supplyList()
			},
			clearInput() {

			},
			Input() {
				this.form.page = 1
				this.list1 = []
				this.supplyList()
			},
			goDetails(item) {
				supplyBrowse({
					id: item.id
				}).then(res => {
					console.log(res)
				})
				uni.navigateTo({
					url: '/components/listDetail/Detail?type=1&data=' + JSON.stringify(item) + '&showSee=false'
				})
			}
		}
	}
</script>
<style>
	/* @page{
		background-color: #E2E2E2;
	} */
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.ck {
		width: 70px;
		color: #fff;
		background-color: #00C777;
		text-align: center;
		border-radius: 26rpx;
		padding: 5rpx 0;
	}
	::v-deep .search .u-search__action {
		color: #00C777
	}

	.freshTime {
		color: #FFAB68;
		margin-left: 20rpx;
	}

	.freshSupply {
		width: 40px;
		height: 40px;
		font-size: 16px;
		border: 1px solid #00c777;
		display: flex;
		color: #fff;
		justify-content: center;
		padding: 26rpx;
		border-radius: 50%;
		position: fixed;
		bottom: 30px;
		right: 20rpx;
		background: #00c777;
		text-align: center;
	}

	@page {
		background-color: #E2E2E2;
	}

	.blue {
		color: #00C777
	}

	.supply {
		padding: 0 15rpx;
		margin-bottom: 40px;

		.list {
			background-color: #fff;
			display: flex;
			flex-direction: column;
			margin-bottom: 15rpx;
			box-shadow: 2px 3px 7px #807e7e4f;
			border-radius: 13rpx;

			.main-container {
				height: 168rpx;
				display: flex;
				padding: 0 20rpx;
				background: #fff;
				font-size: 22rpx;
				padding: 12rpx 0 20rpx 0;
				border-bottom: 1px solid #E2E2E2;
				margin: 15rpx;

				.left-img {
					width: 160rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}

				.right-container {
					flex: 1;
					font-size: 22rpx;
					width: 100%;

					.top {
						display: flex;
						border-bottom: 1px solid #E2E2E2;
						justify-content: center;
						align-items: center;
						margin: 0rpx 15px;
						padding: 0rpx 0 10rpx 0;

						.name {
							flex: 1;
							color: #00C777;
							display: flex;

							.vip {
								background: #00C777;
								color: #fff;
								border-radius: 25rpx;
								padding: 0 15rpx;
								margin-right: 15rpx;
							}
						}

						.dolor {
							color: #FD4343;
						}
					}

					.content {
						display: flex;
						flex-direction: column;
						margin: 0rpx 15px;
						padding: 0rpx 0 10rpx 0;

						.content-top {
							display: flex;
							margin: 15rpx 0px;

							.bx,
							.gf,
							.gd {
								width: 50%;
							}
						}

						.center {
							display: flex;

							.jp,
							.wz,
							.empt {
								width: 50%;
							}

							.jp {
								color: #00C777;
							}

							.wz {
								color: #FFAB68;
							}

						}

						.intro {
							color: #C9C9C9;
						}
					}

					.intro {
						margin: 0rpx 15px;
						padding: 0rpx 0 10rpx 0;
						color: #C9C9C9;
						width: 220px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}
				}
			}

			.list-bottom {
				margin: 15rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #4F4F4F;
				font-size: 26rpx;

				.liulan {}
			}
		}

		font-size: 14px;

		.tab-top {

			padding: 40rpx 15px;
			background: #fff;
		}

		.search {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 15rpx;
			margin-bottom: 15rpx;
			background: #fff;
			padding: 40rpx 0;

			.dw {
				width: 170rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #00C777;

				.closeSel {
					margin-left: 10rpx;
				}

				.city {
					margin-left: 10rpx;
				}

				image {
					height: 15px;
					width: 10px;
				}
			}

			.search-input {
				flex: 1;
			}

		}

	}
</style>
